<template>
  <configForm ref="formRef" :key="key" rawKey="clue_id" :configs="isDetail ? detailForm : createForm" :info="detail"
    :server="saleClueServer" :beforeSubmit="beforeSubmit" :showSubmitBtn="!isDetail" :showCancelBtn="!isDetail" />
</template>

<script setup lang="jsx">
import { saleClueServer } from '@/api/clue'
import { ref } from 'vue'
import ConfigForm from '@/components/CRUD/ConfigForm.vue'
import Percent from './Percent.vue'
import OrganizationDialog from '@/components/Organization/OrganizationDialog.vue'
import { useUserStore } from '@/stores/user'
import { number2text } from '@/utils/index'
const userStore = useUserStore()

const props = defineProps({
  info: {
    type: Object,
    required: true,
  },
})

const isDetail = props.info.is_success;
const detail = ref();
const key = ref(1);
const getDetail = async () => {
  if (props.info.clue_id) {
    const { data } = await saleClueServer.get({ clue_id: props.info.clue_id })
    if (data) {
      detail.value = {
        company_name: props.info.company_name,
        community_name: props.info.community_name,
        amount: data.amount,
        contract_url: data.contract_url,
        rate: {
          hj_rate: data.hj_rate,
          fd_rate: data.fd_rate,
          ss_rate: data.ss_rate,
        },
        prediction_lawyer_amount: data.prediction_lawyer_amount,
        visit: {
          name: data.visit_user_name,
          user_id: data.visit_user_id,
        },
        sale: {
          name: data.sale_user_name,
          user_id: data.sale_user_id,
        }
      }
      key.value += 1; // 更新key以重新渲染表单
    }
  }
}
isDetail && getDetail();


const formRef = ref()
const createForm = [
  {
    label: '公司',
    key: 'company_name',
    type: 'custom',
    defaultValue: props.info.company_name,
    render: () => <span>{props.info.company_name}</span>,
  },
  {
    label: '小区',
    key: 'community_name',
    type: 'custom',
    defaultValue: props.info.community_name,
    render: () => <span>{props.info.community_name}</span>,
  },
  {
    label: '上传合同',
    required: true, //
    key: 'contract_url',
    type: 'file',
    props: { placeholder: '请上传合同', autoUpload: true },
  },
  {
    label: '欠费总金额',
    required: true, //
    key: 'amount',
    type: 'number',
    props: { placeholder: '请输入欠费总金额', onChange: onUpdateForm, precision: 2, showChinese: true, },
  },
  {
    label: '签单比例',
    required: true, //
    key: 'rate',
    type: 'custom',
    props: { onChange: onUpdateForm },
    render: Percent,
  },
  {
    label: '预估律师费',
    required: true, //
    key: 'prediction_lawyer_amount',
    type: 'number',
    props: { placeholder: '预估律师费', disabled: true, precision: 2, showChinese: true, },
  },
  {
    label: '约访人',
    required: true,
    key: 'visit',
    type: 'custom',
    defaultValue: {
      name: userStore.username,
      user_id: userStore.userId,
    },
    props: { type: 'user', placeholder: '请选择约访人', },
    render: OrganizationDialog,
  },
  {
    label: '签单人',
    required: true,
    key: 'sale',
    type: 'custom',
    defaultValue: {
      name: userStore.username,
      user_id: userStore.userId,
    },
    props: { type: 'user', placeholder: '请选择签单人', },
    render: OrganizationDialog,
  },
]
const detailForm = [
  {
    label: '公司',
    key: 'company_name',
    type: 'custom',
    render: (_props) => <span>{_props.modelValue}</span>,
  },
  {
    label: '小区',
    key: 'community_name',
    type: 'custom',
    render: (_props) => <span>{_props.modelValue}</span>,
  },
  {
    label: '上传合同',
    key: 'contract_url',
    type: 'file',
    props: { placeholder: '请上传合同', disabled: true },
  },
  {
    label: '欠费总金额',
    key: 'amount',
    type: 'custom',
    render: (_props) => <div>
      <el-money num={_props.modelValue} />
      <div class="text-sm text-zinc-400 w-full mt-2">{number2text(_props.modelValue)}</div>
    </div>,
  },
  {
    label: '签单比例',
    key: 'rate',
    type: 'custom',
    render: (_props) => <div>
      <div>和解比例：{_props.modelValue?.hj_rate}%</div>
      <div>诉讼比例：{_props.modelValue?.ss_rate}%</div>
      <div>返点比例：{_props.modelValue?.fd_rate}%</div>
    </div>,
  },
  {
    label: '预估律师费',
    key: 'prediction_lawyer_amount',
    type: 'custom',
    render: (_props) => <div>
      <el-money num={_props.modelValue} />
      <div class="text-sm text-zinc-400 w-full mt-2">{number2text(_props.modelValue)}</div>
    </div>,
  },
  {
    label: '约访人',
    key: 'visit',
    type: 'custom',
    props: { type: 'user', placeholder: '请选择约访人', disabled: true },
    render: OrganizationDialog,
  },
  {
    label: '签单人',
    key: 'sale',
    type: 'custom',
    props: { type: 'user', placeholder: '请选择签单人', disabled: true },
    render: OrganizationDialog,
  },
]

function onUpdateForm(e) {
  formRef.value.updateForm((form) => {
    const newForm = { ...form }

    if (form.rate?.hj_rate && form.rate?.fd_rate && form?.amount) {
      let prediction_lawyer_amount = ((form.rate.hj_rate - form.rate.fd_rate) * form.amount) / 100
      // 保留两位小数
      prediction_lawyer_amount = parseFloat(prediction_lawyer_amount.toFixed(2))
      console.log(form);

      newForm.prediction_lawyer_amount = prediction_lawyer_amount
    }
    return newForm
  })
}

const beforeSubmit = (params) => {
  params.clue_id = props.info.clue_id

  params.hj_rate = params.rate.hj_rate
  params.ss_rate = params.rate.ss_rate
  params.fd_rate = params.rate.fd_rate
  delete params.rate

  params.visit_user_id = params.visit.user_id
  delete params.visit
  params.sale_user_id = params.sale.user_id
  delete params.sale
  return params
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
